<script type="text/html" template>
<div class="layui-fluid" >
    <div class="layui-card">
        <div class="layui-card-header">编辑任务</div>
        <div class="layui-card-body" style="pediting: 15px;">
            <form class="layui-form"  lay-filter="editForm">
                <input type="hidden" value="{{d.jobId}}" name="jobId" />
                <input type="hidden" value="{{d.status}}" name="status">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>bean名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="beanName" value="{{d.beanName}}" lay-verify="required" autocomplete="off" placeholder="请输入bean名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">参数</label>
                    <div class="layui-input-block">
                        <input type="text" name="params" value="{{d.params}}"  placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>cron表达式</label>
                    <div class="layui-input-inline">
                        <select id="jobType"  class="layui-input" lay-filter="jobType">
                            <option value="">请选择</option>
                            <option value="0">每秒</option>
                            <option value="4">每分</option>
                            <option value="1">每天</option>
                            <option value="3">每周</option>
                            <option value="2">每月</option>
                        </select>
                    </div>
                    <div class="layui-input-inline second" style="display: none">
                        <input type="text" id="second" name="second" autocomplete="off" placeholder="" class="layui-input">
                    </div>
                    <div class="layui-input-inline dayOfWeeks" id="dayOfWeeks" style="width: 250px;display: none;" >

                    </div>
                    <div class="layui-input-inline dayOfMonths" id="dayOfMonths" style="width: 250px;display: none;" >

                    </div>
                    <div class="layui-input-inline time" style="display: none">
                        <input type="text" id="time" name="time" autocomplete="off" readonly placeholder="选择时间yyyy-MM-dd" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="cronExpression" lay-verify="required"  value="{{d.cronExpression}}"   readonly  autocomplete="off" placeholder="如：0 0 12 * * ？" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="备注" class="layui-textarea">{{d.remark}}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn" lay-submit="" lay-filter="editScheduleSubmit">立即提交</a>
                        <a class="layui-btn layui-btn-primary" onclick="layui.admin.refresh();">关闭</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
        <legend>最近10次运行时间:</legend>
    </fieldset>
    <div class="layui-timeline-content layui-text">
        <ul id="run">

        </ul>
    </div>
</div>
</script>

<script>
    var EditSchedule = function (admin,form,layer, index,$) {
        var $this = this,laydate = layui.laydate ,dayOfWeeks,dayOfMonths;
        //初始化
        this.init = function () {
            form.render();
            /* 监听提交 */
            form.on('submit(editScheduleSubmit)', function (data) {
                var requestData = data.field;
                //提交用户
                admin.post({
                    api:'updateSchedule',
                    data:JSON.stringify(requestData),
                    contentType: 'application/json;charset=UTF-8',
                    success:function (res) {
                        if(res.code == 0){
                            admin.success('操作成功',function () {
                                admin.refresh();
                            });
                        }
                    }
                });
                return false;
            });

            //监听类型
            form.on('select(jobType)', function(data){
                if(data.value == ""){
                    $(".second").hide();
                    $(".dayOfWeeks").hide();
                    $(".time").hide();
                    $(".dayOfMonths").hide();
                }else if(data.value == 0 || data.value == 4){  //每秒或者每分
                    $(".second").show();
                    $(".time").hide();
                    $(".dayOfWeeks").hide();
                    $(".dayOfMonths").hide();
                    $("#second").val("");
                    if(data.value == 0){$("#second").attr("placeholder","每多少秒执行");}
                    if(data.value == 4){$("#second").attr("placeholder","每多少分执行");}
                }else if(data.value == 1){ //天
                    $(".second").hide();
                    $(".dayOfWeeks").hide();
                    $(".dayOfMonths").hide();
                    $(".time").show();
                }else if(data.value == 3){ //周
                    $(".second").hide();
                    $(".time").hide();
                    $(".dayOfMonths").hide();
                    $(".dayOfWeeks").show();
                }else if(data.value == 2){ //月
                    $(".second").hide();
                    $(".time").hide();
                    $(".dayOfMonths").show();
                    $(".dayOfWeeks").hide();
                }
                $("input[name='cronExpression']").val("");
            });
            //监听 分、秒
            $("#second").on('input propertychange',function(){
                //如果输入非数字，则替换为''
                this.value = this.value.replace(/[^\d\.]/g, '');
                //必须保证第一个为数字而不是.
                this.value = this.value.replace(/^\./g,'');
                //保证只有出现一个.而没有多个.
                this.value = this.value.replace(/\.{2,}/g,'.');
                //保证.只出现一次，而不能出现两次以上
                this.value = this.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
                if(this.value > 0){
                    $this.getCron(this.value);
                }
            });
            //监听时间
            laydate.render({
                elem: '#time',
                type: 'time',
                done: function(value, date, endDate){
                    if(value){
                        $this.getCron(value);
                    }
                }
            });
            var xmSelect = layui.xmSelect;

            //渲染 周
            dayOfWeeks = xmSelect.render({
                el: '#dayOfWeeks',
                autoRow:true,
                max: 3,
                toolbar: {
                    show: true,
                    list: [ 'ALL', 'CLEAR']
                },
                maxMethod(seles, item){
                    admin.error('不能选了, 已经超了')
                },
                data: [
                    {name: '周一', value: 1},
                    {name: '周二', value: 2},
                    {name: '周三', value: 3},
                    {name: '周四', value: 4},
                    {name: '周五', value: 5},
                    {name: '周六', value: 6},
                    {name: '周天', value: 7}
                ],
                on:function (arr, change, isAdd) {
                    if(arr.arr.length > 0){
                        $(".time").show();
                        if($("#time").val()){
                            $this.getCron($("#time").val());
                        }
                    }else{
                        $(".time").hide();
                        $("#time").val("");
                        $("input[name='cronExpression']").val("");
                    }
                }
            });
            var monthsData = [];
            for(var i=1;i<32;i++){
                monthsData.push({
                    name: i+'号',
                    value: i
                })
            }
            //渲染 月
            dayOfMonths = xmSelect.render({
                el: '#dayOfMonths',
                autoRow:true,
                paging: true,
                pageSize: 10,
                toolbar: {
                    show: true,
                    list: [ 'ALL', 'CLEAR']
                },
                max: 3,
                maxMethod(seles, item){
                    admin.error('不能选了, 已经超了')
                },
                data: monthsData,
                on:function (arr, change, isAdd) {
                    if(arr.arr.length > 0){
                        $(".time").show();
                        if($("#time").val()){
                            $this.getCron($("#time").val());
                        }
                    }else{
                        $(".time").hide();
                        $("#time").val("");
                        $("input[name='cronExpression']").val("");
                    }
                }
            })
        };
        //获取cron 表达式
        this.getCron = function (val) {
            var requestData = {
                jobType: $("#jobType").val()
            };
            if($("#jobType").val() == 0){
                requestData.second = val;
            }else if($("#jobType").val() == 4){
                requestData.minute = val;
            }else if($("#jobType").val() == 1){
                requestData.time = val;
            }else if($("#jobType").val() == 3){
                requestData.time = val;
                var selectArr = dayOfWeeks.getValue();
                var dayOfWeekList = [];
                selectArr.forEach(function (obj,index) {
                    dayOfWeekList.push(obj.value)
                })
                requestData.dayOfWeeks = dayOfWeekList.join(",");
            }else if($("#jobType").val() == 2){
                requestData.time = val;
                var selectArr = dayOfMonths.getValue();
                var dayOfMonthsList = [];
                selectArr.forEach(function (obj,index) {
                    dayOfMonthsList.push(obj.value)
                });
                requestData.dayOfMonths = dayOfMonthsList.join(",");
            }
            admin.post({
                api:'getCronStr',
                data:JSON.stringify(requestData),
                contentType: 'application/json;charset=UTF-8',
                success:function (res) {
                    if(res.code == 0){
                        console.log(res.data)
                        $("input[name='cronExpression']").val(res.data.cron);
                        $("textarea").val(res.data.cronDescription);
                        var runHtml  = [];
                        res.data.timeList.forEach(function (obj,index) {
                            runHtml.push('<li>'+obj+'</li>');
                        });
                        $("#run").html(runHtml.join(""));
                    }
                }
            })
        };
    };

</script>